<!--
 * @Description:  第二十章（keep-alive缓存组件）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 12:22:51
-->
<template>
  <div>
    <h1>第二十章（keep-alive缓存组件）</h1>
    <h2>exclude</h2>
    <div>
      <el-button type="primary" @click="flag = !flag">切换组件</el-button>
      <keep-alive :exclude="['A']">
        <A v-if="flag"></A>
        <B v-else></B>
      </keep-alive>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from '@/components/20th/A.vue'
import B from '@/components/20th/B.vue'

const flag = ref<boolean>(true)
</script>
<style scoped></style>
